<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
			addClass()          有参  1个参和多个参
			                      语法；addclass(类名)
			                      <p class="类名">
								  语法；addClass("类名1 类名2")；
								   <p class="类名 1  类名2 ">
								   功能；   匹配元素集合中所偶元素
								   添加一个或者多个类名操纵
								   
		    removeClass()
			toggleClass()
			hasClass()
		 -->
		<!-- 要求：1.jq引入
		          2.html：   div  id="targetElement" 
							4个按钮    id="addClassBtn"
							          id="removeClassBtn"
									  id="toggleClassBtn"
									  id="hasClassBtn"
				             div  id="resultArea"
				 3.css:  .bgColor{  300*300  背景色随意}
						  .broders{ 10个像素实线红色边框  倒角画圆}
							 -->
							 <script src="../MI/js/jquery-1.11.1.js"></script>
							 
	</head>
	<body>
		<div id="targetElement"></div>
		
		<button id="addClassBtn">添加类名</button>
		<button id="removeclassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasclassBtn">检查类名是否存在</button>
		 <div id="resultArea"></div>
		
		
		<script>
			//1.点击  添加类名  按钮   添加效果 【样式】 300*300 背景红色  
			$("#addClassBtn ").click(function(){
				//div添加样式 ---存在样式
				$("#targetElement").addClass("bgColor broders");
				$("resultArea").html("<h4>添加样式类名 ； bgColor </h4>")
			});
			
			
			
		</script>
		
	</body>
</html>